<template>
  <div class="body">
    <div>
      <img class="logo" src="../../assets/images/logo.png" />
    </div>
    <div class="box pd flex font-size-1.4rem">
      <div class="flex items-center flex-1">
        <Avatar :src="store.tgUser.avatar" :name="store.tgUser.first_name" />
        <div class="p-l-0.7rem">HI, {{ store.tgUser?.first_name }}</div>
      </div>
      <div class="fx-c w-7rem" @click="go('/assets?type=1')">
        <div class="num">{{ assets?.balance }}</div>
        <div>{{ $t('home.home.balance') }}</div>
      </div>
      <div class="fx-c w-7rem" @click="go('/assets?type=1')">
        <div class="num">{{ assets?.cash }}</div>
        <div>{{ $t('home.home.cash') }}</div>
      </div>
      <div class="fx-c w-7rem" @click="go('/coupons')">
        <div class="num">{{ assets?.coupon }}</div>
        <div>{{ $t('home.home.coupon') }}</div>
      </div>
      <!-- <div class="fx-c w-8rem" @click="go('/assets?type=2')">
        <div class="num">{{ assets?.point }}</div>
        <div>{{ $t('home.home.credit') }}</div>
      </div> -->
    </div>
    <div class="box pd flex justify-between">
      <div class="fx-c menu flex-1" @click="go('/home/drink')">
        <img src="../../assets/images/take.png" />
        <div>{{ $t('home.home.take') }}</div>
      </div>
      <div class="line"></div>
      <div class="fx-c menu flex-1" @click="go('/agentProducts')">
        <img src="../../assets/images/agent.png" />
        <div>{{ $t('home.home.agent') }}</div>
      </div>
      <div class="line"></div>
      <div class="fx-c menu flex-1" @click="go('/scan')">
        <img src="../../assets/images/scan.png" />
        <div>{{ $t('home.home.scan') }}</div>
      </div>
    </div>
    <div class="box p-x-3rem p-y-2rem flex justify-between">
      <div class="fx-c act" @click="go('/invite')">
        <img src="../../assets/images/invite.png" />
        <div>{{ $t('home.home.inviteTip') }}</div>
      </div>
      <div class="fx-c act" @click="go('/home/product')">
        <img src="../../assets/images/credits.png" />
        <div>{{ $t('home.home.creditsTip') }}</div>
      </div>
      <div class="fx-c act" @click="go('/prizes')">
        <img src="../../assets/images/prize.png" />
        <div>{{ $t('home.home.prize') }}</div>
      </div>
      <div class="fx-c act" @click="channel()">
        <img src="../../assets/images/channel.png" />
        <div>Channel</div>
      </div>
    </div>
    <div class="box promotion" @click="go('/promotion')">
      <div class="title">
        <div class="flex items-center">
          <img class="w-1.5rem h-1.5rem m-l-1.5rem m-r-0.7rem" src="../../assets/images/promotion.png" />
          <div>{{ $t('home.home.promotion') }}</div>
        </div>
      </div>
      <div class="content">
        <div>{{ $t('home.home.promotion1') }}</div>
        <div>{{ $t('home.home.promotion2') }}</div>
      </div>
    </div>
    <div class="h-50px"></div>
    <lang />
  </div>
</template>

<script setup lang="ts">
import { useWebAppViewport } from 'vue-tg'
import { showConfirmDialog } from 'vant'
const { onViewportChanged } = useWebAppViewport()
const store = useAppStore()
const { t } = useI18n()
const assets = ref<ApiAssetVO>()

const router = useRouter()

function go(path: string) {
  router.push(path)
}

onMounted(() => {
  getAsset()
})

async function getAsset() {
  assets.value = await apis.api.userAssetAsset()
  if (!store.channelTip) {
    store.channelTip = true
    if (!assets.value.channel) {
      showConfirmDialog({
        message: t('home.home.flow')
      })
        .then(() => {
          location.href = 'https://t.me/TEAWOO_UZ'
        })
        .catch(() => {})
    }
  }
}

function channel() {
  location.href = 'https://t.me/TEAWOO_UZ'
}

// onViewportChanged(() => {
//   apis.api.userAssetQueryChannel()
// })

function soon() {
  showToast('coming soon')
}
</script>

<style lang="scss" scoped>
.body {
  overflow: hidden;
  width: 100%;
  min-height: 100vh;
  background-image: url('../../assets/images/bg.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: #f6f6f6;
}
.logo {
  width: 127px;
  height: 153px;
  display: block;
  margin: 100px auto 20px;
}
.box {
  border-radius: 1.2rem;
  background-color: #fff;
  margin: 0 1.25rem 1.5rem;
}
.pd {
  padding: 2rem 1.3rem;
}

.line {
  width: 2px;
  height: 7.6rem;
  background: #efefef;
  border-radius: 0.08rem;
}
.menu {
  img {
    width: 4.5rem;
    height: 4.5rem;
  }
  div {
    padding: 0.8rem 0 0;
    font-size: 1.8rem;
    color: #000000;
  }
}
.num {
  color: #666666;
  margin-bottom: 0.8rem;
}
.act {
  img {
    width: 2.7rem;
    height: 2.7rem;
    margin-bottom: 0.7rem;
  }
  div {
    font-size: 1.2rem;
    color: #666666;
  }
}

.promotion {
  font-weight: normal;
  font-size: 1.2rem;
  color: #333333;
  overflow: hidden;
  .title {
    background-color: #fff;
    height: 2.8rem;
    display: flex;
    align-items: center;
  }
  .content {
    text-align: center;
    background-color: #3aa1a2;
    padding: 1.5rem;
    font-weight: normal;
    font-size: 1.4rem;
    color: #ffffff;
    line-height: 2.2rem;
  }
}
</style>
